<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!doctype html>
<html>
<head>
	<title>消息群发</title>

	<script type="text/javascript">
		var pageListUrl = "<c:url value="/announcement/customer/list" />";
		var saveUrl = "<c:url value="/announcement/save" />";

		var detailTbodyTemplateID = "detailTbodyTemplate";
		var detailTbodyID = "detailTbody";
		var pageToolID = "pageTool";

		var editTemplateID = "edit-template";
		var editFormID = "nsForm";
		var searchFormID = "searchForm";


 		$(function () {
			loadNotice();
			toPage(1);
		});

		template.helper('separatorValue', function (val) {
			if(val != null && val.length > 0){
				var array = val.split(",");
				var tmp= "";
				$.each(array, function(i, v){
					if(i > 0){
						tmp += "<BR/>";
					}
					tmp += v;
				});
				return tmp;
			}
		});

	</script>

</head>


<body  class="list-body">

<div class="content">
	<div class="title fix">
		<h3 class="b f14 fl">消息群发</h3>
		<%-- <div class="f14 fl " style="margin-top: 30px; margin-left:30px; "><a href='<c:url value="/remind/sms/manage/${dealerNum}" />' >短信余额<label class="msg-label orange b" id="smsQuantity">${smsQuantity}</label></a></div> --%>
		<div class="btns fr">
			<%--<button class="green" onclick="add()">新增</button>--%>
			<%--<button class="orange">返回</button>--%>
		</div>
	</div>

	<div class="main">
		<div class="inquiry">
			<form id="searchForm">
				<input type="hidden" name="currentPage" value="1">
				<input type="hidden" name="toolStyle" value="pms">
				<input type="hidden" name="limit" value="10">
				<input type="hidden" name="method" value="toPage">
				<input type="hidden" name="dealerNum" value="${dealerNum}">

				<div class="group"><label>客户类型：</label>
					<select name="customerGroupId" id="customerGroupId">
						<option value="">--全部--</option>
						<c:forEach items="${customerGroups}" var="g">
							<c:if test="${!g.isCustom}">
								<option value="${g.id}">${g.groupName}</option>
							</c:if>
						</c:forEach>
						<optgroup label="自定义客户分类">
							<c:forEach items="${customerGroups}" var="g">
								<c:if test="${g.isCustom}">
									<option value="${g.id}">${g.groupName}</option>
								</c:if>
							</c:forEach>
						</optgroup>
					</select>
					<div class="" style="display: inline;">
						<button class="green" type="button" style="background: #02af4f;border: none;font-size: 16px;font-weight: bold;color: #FFF;" onclick="mamageCustomerStyle()">+</button>
					</div>
				</div>
				<div class="group"><label>手机：</label>
					<input class="" type="text" name="mobilePhone" id="mobilePhone" value="" />
				</div>
				<div class="group"><label>车牌：</label>
					<input class="" type="text" name="carPlate" id="carPlate" value="" />
				</div>
				<div class="group"><label>车辆品牌：</label>
					<select name="carBrand" id="carBrand">
						<option value="">--全部--</option>
						<c:forEach items="${vehicleBrands}" var="vb">
							<option value="${vb.code}">${vb.codeValue}</option>
						</c:forEach>
					</select>
				</div>
				<div class="group"><label>上次保养时间：</label><input type="text" name="lastMaintenanceDate" id="lastMaintenanceDate" value="" class="Wdate"  onFocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" autocomplete="off" /></div>

				<div class="group"><label>一年累计进店次数：</label>
					<input class="mini" type="text" name="countOfToStoreMin" id="countOfToStoreMin" value="" />
					- <input class="mini" type="text" id="countOfToStoreMax" name="countOfToStoreMax" value="" />
				</div>
				<div class="group"><label>一年累计消费金额：</label>
					<input class="mini" type="text" name="moneyOfYearMin" id="moneyOfYearMin" value="" />
					- <input class="mini" type="text" id="moneyOfYearMax" name="moneyOfYearMax" value="" /></div>
				<div class="btns"><button type="button" class="bottleGreen vm" onclick="toPage(1)">查询</button></div>
			</form>
		</div>
		<div class="table">
			<table width="100%">
				<thead>
				<tr>
					<th width="40"><input type="checkbox" name="name" value="" onclick="selectAll(this, 'checkSRID')" /></th>
					<%--<th width="50">序号</th>--%>
					<th width="120">客户</th>
					<th width="80">手机号码</th>
					<th width="120">客户类型</th>
					<th width="60">车牌号</th>
					<th width="60">车品牌</th>
					<th width="">最近一年到店次数</th>
					<th width="">最近一年消费金额</th>
					<th width="80">上次保养时间</th>
					<th width="">上次保养金额</th>
					<th width="">上次保养里程</th>
					<th width="">上次保养项目</th>
				</tr>
				</thead>
				<tbody id="detailTbody" class="detailTr"></tbody>
			</table>
		</div>

		<div class="pageTool" id="pageTool"></div>

		<div class="cg-fieldset">
			<fieldset>
				<legend>群发消息</legend>
				<div class="promotion-box">
					<select name="customerPromotionId" id="customerPromotionId">
						<option value="">--请选择--</option>
					</select>
					<div class="btns" style="display: inline;">
						<button class="green min" onclick="reviewSms()">短信预览</button>
						<button class="green min" onclick="add(loadNotice, false)">新建信息</button>
						<button class="green min" onclick="manageNotice()">群发信息管理</button>
					</div>
				</div>
				<%--<div class="btns tl"><button class="green " onclick="reviewSms()">短信预览</button></div>--%>
			</fieldset>

			<fieldset>
				<legend>短信预览</legend>
				<div id="reviewSmsBox"></div>
			</fieldset>
		</div>
		<div class="btns tl tc">
			<button class="green " onclick="sendSelected()">发送给当前选择客户</button>
			<button class="green " onclick="sendAll()">发送给所有符合条件的客户</button>
		</div>
		<div class="mb10"></div>
	</div>
</div>
<script type="text/javascript">

	var loadNotice = function loadNotice(){
		var $sel = $("#customerPromotionId");

		var options = [];
		options.push('<option value="">--请选择--</option>');

		$.ajax({
			type: "POST",
			url: '<c:url value="/announcement/list/${dealerNum}" />',
			data: {},
			dataType: "json",
			success: function(data){
				if (data.success) {
					$sel.empty();

					$.each(data.data, function(key, value) {
						options.push('<option value="'+ value.id +'">' + value.content + '</option>');
					});
					$sel.html(options.join(''));

				} else {
					ns.error(data.message);
				}

			},
			error: function(){
				//ns.error("操作失败，请重试！");
			}
		});
	};


	function reviewSms(){
		var $reviewSmsBox = $("#reviewSmsBox");
		var id = $("#customerPromotionId").val();
		if(id.length < 1){
			ns.error("请先选择群发信息！");
			return ;
		}

		var nsIndex = ns.load("正在加载数据...");

		$.ajax({
			type: "GET",
			url: '<c:url value="/announcement/sms/review/${dealerNum}/" />' + id,
			data: {},
			dataType: "json",
			async: true,
			cache:false,
			success: function(data){
				ns.close(nsIndex);
				if (data.success) {
					if(data.data != null){
						$reviewSmsBox.html(data.data);
					}
				} else {
					ns.error(data.message);
				}
			},
			error: function(){
				ns.close(nsIndex);
				ns.error("操作失败，请重试！");
			}
		});
	}

	function sendAll(){
		var id = $("#customerPromotionId").val();
		if(id.length < 1){
			ns.error("请先选择群发信息！");
			return ;
		}

		var nsIndex = ns.load("正在处理数据，请稍等...");

		var data  = {
			dealerNum: '${dealerNum}',
			announcementId: id,

				customerGroupId: $("#customerGroupId").val(),
				carBrand: $("#carBrand").val(),
				mobilePhone: $("#mobilePhone").val(),
				lastMaintenanceDate: $("#lastMaintenanceDate").val(),
				carPlate: $("#carPlate").val(),
				countOfToStoreMin: $("#countOfToStoreMin").val(),
				countOfToStoreMax: $("#countOfToStoreMax").val(),
				moneyOfYearMin: $("#moneyOfYearMin").val(),
				moneyOfYearMax: $("#moneyOfYearMax").val()

		};

		$.ajax({
			type: "POST",
			url: '<c:url value="/announcement/sms/sendAll" />',
			data: data,
			dataType: "json",
//			contentType : 'application/json',
			async: true,
			cache:false,
			success: function(data){
				ns.close(nsIndex);
				if (data.success) {
					ns.ok(data.message);
					loadSmsQuantity();
					toPage(1);
					$("#reviewSmsBox").text("");
				} else {
					ns.error(data.message);
				}

			},
			error: function(){
				ns.close(nsIndex);
				ns.error("操作失败，请重试！");
			}
		});
	}

	function sendSelected(){
		var id = $("#customerPromotionId").val();
		if(id.length < 1){
			ns.error("请先选择群发信息！");
			return ;
		}

		var selectSRIdArray = new Array();

		$("input[type=checkbox][name='checkSRID']:checked").each(function() {
			selectSRIdArray.push($(this).val());
		});

		if(selectSRIdArray.length < 1){
			ns.error("请先选择要发送的客户");
			return;
		}


		var data  = {
			dealerNum: '${dealerNum}',
			announcementId: id,

			customerGroupId: $("#customerGroupId").val(),
			carBrand: $("#carBrand").val(),
			mobilePhone: $("#mobilePhone").val(),
			lastMaintenanceDate: $("#lastMaintenanceDate").val(),
			carPlate: $("#carPlate").val(),
			countOfToStoreMin: $("#countOfToStoreMin").val(),
			countOfToStoreMax: $("#countOfToStoreMax").val(),
			moneyOfYearMin: $("#moneyOfYearMin").val(),
			moneyOfYearMax: $("#moneyOfYearMax").val()

			,customerId : selectSRIdArray

		};

		var nsIndex = ns.load("正在处理数据，请稍等...");

		$.ajax({
			type: "POST",
			url: '<c:url value="/announcement/sms/sendSelected" />',
			data: data,
			dataType: "json",
			async: true,
			cache:false,
			traditional :true,
			success: function(data){
				ns.close(nsIndex);
				if (data.success) {
					ns.ok(data.message);
					loadSmsQuantity();
					toPage(1);
					$("#reviewSmsBox").text("");
				} else {
					ns.error(data.message);
				}

			},
			error: function(){
				ns.close(nsIndex);
				ns.error("操作失败，请重试！");
			}
		});
	}


	var historyParam = {
		customerId : "",
		vehicleId : ""
	};

	function showSendSmsList(customerId, vehicleId){
		historyParam["customerId"] = customerId;
		historyParam["vehicleId"] = vehicleId;

		layer.open({
			type: 1,
			title: '发送历史',
			area: '850px',
			offset: '30px',
			content: template("historyTemplate", {}),
			success:function(){
				loadHistory(1, 10);
			}
		});
	}

	function loadHistory(page, limit) {

		var $searchForm = $("#historySearchForm");

		if(page) {
			$searchForm.find("input[name=currentPage]").val(page);
		}

		if(limit) {
			$searchForm.find("input[name=limit]").val(limit);
		}

		$searchForm.find("input[name=customerId]").val(historyParam.customerId);
		$searchForm.find("input[name=vehicleId]").val(historyParam.vehicleId);


		var loadIndex = ns.load("数据加载中...");

		$.ajax({
			type: "POST",
			url: '<c:url value="/remind/service/sms/list" />',
			dataType: "json",
			data: $searchForm.serialize(),
			async: true,
			success: function (data) {
				ns.close(loadIndex);
				if (data.success) {
					var html = template("historyDetailTbodyTemplate", data.data);

					$("#historyDetailTbody").html(html);
					$("#historyPageTool").html(data.data.pageToolHtml);
				} else {
					ns.error(data.message);
				}

			},
			error: function () {
				ns.close(loadIndex);
				ns.error('数据加载失败！');
			}
		});
	}


	function loadSmsQuantity(){
		$.ajax({
			type: "POST",
			url: '<c:url value="/remind/sms/quota/${dealerNum}" />',
			dataType: "json",
			data:{},
			async: true,
			success: function (data) {
				if (data.success) {
					$("#smsQuantity").html(data.data);
				} else {
					$("#smsQuantity").html('');
				}

			},
			error: function () {
				$("#smsQuantity").html('');
			}
		});
	}


	function manageNotice(){
//		console.log('$(window.parent.parent)')
//		console.log($(window.parent.parent))
		location = '<c:url value="/announcement/manage/${dealerNum}" />';
	}

	function mamageCustomerStyle(){
		location ='<c:url value="/customerGroup/manage/${dealerNum}?returnBtnEnabled=announcementSend" />';
	}

</script>

<script id="detailTbodyTemplate" type="text/html">
	{{each items as v i}}
	<tr id="{{v.id}}" >
		<td width="40"><input type="checkbox" name="checkSRID" value="{{v.customerId}}" /></td>
		<%--<td>{{start + i + 1}}</td>--%>
		<td>{{v.memberName}}</td>
		<td>{{v.mobilePhone}}</td>
		<td>{{v.memberType}}</td>
		<td>{{separatorValue v.carPlate}}</td>
		<td>{{separatorValue v.carBrand}}</td>
		<td>{{v.countOfToStore}}</td>
		<td>{{v.moneyOfYear}}</td>
		<td>{{v.lastMaintenanceDate}}</td>
		<td>{{v.lastMaintenanceMoney}}</td>
		<td>{{separatorValue v.lastMaintenanceMileage}}</td>
		<td>{{v.lastMaintenanceItemDisplay}}</td>
	</tr>
	{{/each}}
	{{if items.length == 0}}
	<tr>
		<td colspan="11" class="none-data-tip">没有相关数据</td>
	</tr>
	{{/if}}
</script>



<script id="edit-template" type="text/html">
	<form id="nsForm" method="post" class="form-box">
		<input type="hidden" name="id" value="{{id}}"/>
		<input type="hidden" name="dealerNum" value="${dealerNum}"/>

		<div class="box-body">

			<div class="form-group">
				<label>消息内容：</label>
				<textarea rows="3" name="content" placeholder="请输入消息内容 ...">{{content}}</textarea>
			</div>

		</div>
	</form>
</script>


</body>
</html>




